<template>
  <main>
    <header class="red-envelope-header">
      <mt-header title="我的优惠" :fixed="true">
        <router-link style="text-decoration: none;" to="/mine" slot="left">
          <span class="iconfont icon-go-back"></span>
        </router-link>
        <mt-button class="font" slot="right" @click="exchangeRE">兑换红包</mt-button>
      </mt-header>
      <mt-navbar v-model="selected">
        <mt-tab-item id="1">红包<sup>0</sup></mt-tab-item>
        <mt-tab-item id="2">店铺红包<sup>0</sup></mt-tab-item>
        <mt-tab-item id="3">抵用券<sup>0</sup></mt-tab-item>
      </mt-navbar>
    </header>
    <router-view />
  </main>
</template>

<script>
  export default {
    name: 'red-envelope',
    data() {
      return {
        selected: '1'
      }
    },
    created() {
      this.changePage()
    },
    methods: {
      changePage() {
        console.log(this.selected)
        if(this.selected === '1') {
          this.$router.replace('/redenve')
        }else if(this.selected === '2') {
          this.$router.replace('/shopred')
        }else if(this.selected === '3') {
          this.$router.replace('/diyongquan')
        }
      },
      exchangeRE() {
        this.$router.push('/exchangere')
      }
    },
    watch: {
      selected() {
        this.changePage()
      }
    }
  }
</script>

<style lang="less" scoped>
  .red-envelope-header {
    background-color: #0097FF;
    padding-bottom: 10px;
  }
  .mint-header {
    &::before {
      content: '';
      height: 1px;
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      background: repeating-linear-gradient(to right, transparent, #fff, transparent);
    }
  }
  .mint-navbar {
    margin-top: 68px;
    height:60px;
    background-color: transparent;
  }
  /deep/.mint-tab-item {
    color: #ddd;
  }
  /deep/.mint-tab-item-label {
    font-size: 26px;
  }
  .is-selected {
    color: #fff!important;
    border-bottom-color: #fff!important;
  }
</style>
